<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人资料</title>
  <!-- icon图标 -->
  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
  <!-- 样式初始化 -->
  <link rel="stylesheet" href="./css/base1.css">
  <!-- 公共样式 -->
  <link rel="stylesheet" href="./css/common1.css">
  <!-- 字体图标 -->
  <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
  <!-- 主页样式 -->
  <link rel="stylesheet" href="./css/register.css">

  <script src="js/axios.min.js"></script>
  <script src="js/vue.min.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="ele-2.15.7/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="ele-2.15.7/index.js"></script>
</head>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .box-card {
    width: 100%;
    height: 800px;
    background: #fff;
  }

  .container {
    width: 1240px;
    margin: 0 auto;
    padding: 50px 0;
  }
  .form {
    padding-left: 460px;
  }

</style>
<body>
<!-- 头部导航 -->
<header>
  <!-- 快捷菜单 -->
  <div class="xtx-shortcut">
    <nav class="w">
      <ul class="top-nav fr">
        <li><a href="./login.html">请先登录</a></li>
        <li><a href="./register.html">免费注册</a></li>
        <li><a href="./order.html">我的订单</a></li>
        <li><a href="PersonalCenter.html">会员中心</a></li>
        <li><a href="javascript:;">帮助中心</a></li>
        <li class="about"><a href="javascript:;">联系我</a></li>
        <!-- 新窗口打开 -->
        <li class="concern"><a href="javascript:;">关注我</a></li>
        <li><a target="_blank" href="http://mcongblog.com/">我的博客</a></li>
      </ul>
    </nav>
  </div>
  <!-- 主导航 -->
  <div class="xtx-main-nav w">
    <!-- logo -->
    <h1 class="xtx-logo fl">
      <a href="javascript:;">小兔鲜儿</a>
    </h1>
    <!-- 顶部导航 -->
    <nav class="fl">
      <ul class="main-nav-font">
        <li>
          <a href="index.html">首页</a>
        </li>
        <li>
          <a href="javascript:;">生鲜</a>
        </li>
        <li>
          <a href="javascript:;">美食</a>
        </li>
        <li>
          <a href="javascript:;">餐厨</a>
        </li>
        <li>
          <a href="javascript:;">电器</a>
        </li>
        <li>
          <a href="javascript:;">居家</a>
        </li>
        <li>
          <a href="javascript:;">洗护</a>
        </li>
        <li>
          <a href="javascript:;">孕婴</a>
        </li>
        <li>
          <a href="javascript:;">服装</a>
        </li>
      </ul>
    </nav>
    <div class="main-search fl">
      <input type="text" placeholder="搜一搜" />
      <div class="car">
        <span>2</span>
      </div>
    </div>
  </div>
</header>
<!-- 主体内容 -->
<section>
  <div class="xtx-wrapper" id="app">
    <div class="container">
      <!-- 卡片 -->
      <div class="xtx-card">
        <h3>注册界面</h3>
        <form class="xtx-form">
          <div data-prop="" class="xtx-form-item">
            <span class="">头像</span>
            <template>
              <el-upload
                      name = "image"
                      class="avatar-uploader"
                      action="UploadImageServlet.s"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload"
                      style="margin-left: 30px">
                <img v-if="image" :src="image" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </template>
            <span class="msg"></span>
          </div>

          <div data-prop="" class="xtx-form-item">
            <span class="">昵称</span>
            <input v-model="uname" type="text" placeholder="设置用户名称" style="margin-left: 10px">
            <span class="msg"></span>
          </div>

          <div data-prop="username" class="xtx-form-item">
            <span class="">密码</span>
            <input v-model="pwd" type="text" placeholder="设置用户密码" style="margin-left: 10px">
            <span class="msg"></span>
          </div>
          <div data-prop="phone" class="xtx-form-item">
            <span class="">电话</span>
            <input v-model="phone" type="text" placeholder="输入手机号码" style="margin-left: 10px">
            <span class="msg"></span>
          </div>
          <div data-prop="code" class="xtx-form-item">
            <span class="">邮箱</span>
            <input v-model="email" type="text" placeholder="输入邮箱" style="margin-left: 10px">
            <span class="msg"></span>
          </div>
          <div data-prop="" class="xtx-form-item">
            <span class="">性别</span>
<!--            <input v-model="user.sex" type="text" placeholder="" style="margin-left: 10px">-->
            <template>
              <el-select v-model="sex" placeholder="请选择" style="margin-left: 10px">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
              </el-select>
            </template>
            <span class="msg"></span>
          </div>

          <div class="xtx-form-item">
            <button class="submit" type="button" @click="saveProduct">确定</button>
          </div>
        </form>
      </div>
    </div>
  </div>


</section>
<!-- 底部 -->
<footer>
  <div class="xtx-footer w">
    <!-- 客户服务 -->
    <div class="footer-server fl">
      <p>客户服务</p>
      <div class="service">在线客服</div>
      <div class="question">问题反馈</div>
    </div>
    <!-- 关注我们 -->
    <div class="footer-we fl">
      <p>关注我们</p>
      <div class="number">公众号</div>
      <div class="weibo">微博</div>
    </div>
    <!-- 下载APP -->
    <div class="footer-download fl">
      <p>下载APP</p>
      <div class="code">
        <img src="./uploads/qrcode.png" alt="">
      </div>
      <div class="download">
        <p>扫秒二维码</p>
        <br />
        <p>立即下载APP</p>
        <a href="javascript:;">立即下载</a>
      </div>
    </div>
    <!-- 服务热线 -->
    <div class="footer-hotline fr">
      <p>服务热线</p>
      <div class="num">400-0000-000</div>
      <span>周一至周日 8:00-18:00</span>
    </div>
  </div>

  <div class="xtx-bottom">
    <div class="w">
      <div class="bottom-service">
        <div class="bottom-box">
          <a href="javascript:;">价格亲民</a>
          <a href="javascript:;">物流快捷</a>
          <a href="javascript:;">品质新鲜</a>
        </div>
      </div>
      <div class="bottom-copyright">
        <ul>
          <li><a href="javascript:;">关于我们</a></li>
          <li><a href="javascript:;">帮助中心</a></li>
          <li><a href="javascript:;">售后服务</a></li>
          <li><a href="javascript:;">配送与验收</a></li>
          <li><a href="javascript:;">商务合作</a></li>
          <li><a href="javascript:;">搜索推荐</a></li>
          <li><a target="_blank" href="http://mcongblog.com/">友情链接</a></li>
        </ul>
        <p>CopyRight © A Lucky Boy 版权所有</p>
      </div>
    </div>
  </div>
</footer>
<script src="./js/register.js"></script>
<script src="./js/common.js"></script>

</body>

</html>
<script>
  var v = new Vue({
    el : "#app",
    data : {
      uname : "",
      pwd : "",
      sex : "男",
      phone : "",
      email : "",
      image : "",
      options: [{
        value: '男',
        label: '男'
      }, {
        value: '女',
        label: '女'
      }],

    },
    methods: {
      saveProduct(){
        // 构建post参数
        var params = new URLSearchParams();

        params.append("uname",this.uname);
        params.append("pwd",this.pwd);
        params.append("sex",this.sex);
        params.append("phone",this.phone);
        params.append("email",this.email);
        params.append("image",this.image);

        // 发送 ajax post 请求
        axios.post("SaveUserServlet.s", params).then(res=>{
          if (res.data.code == 1){
            this.$message(res.data.msg);
          } else{
            this.$alert(res.data.msg);
          }
        });
        this.empty();
      },
      // 图片上传组件
      // 上传之后
      handleAvatarSuccess(res, file) {
        // res 是后台返回的结果， 不过，此res != axios.res
        // res ==> axios.res.data
        // res.data ==> webpath
        // 注意 / 前面所代表的前缀
        // res.data.substring(1); 也可
        this.image = "."+res.data;
        this.$forceUpdate();
      },
      // 上传之前
      beforeAvatarUpload(file) {
        const isJPG = file.type.indexOf('image/') > -1;
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 图片 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },

    },
    empty() {
      this.image = "";
      this.sex = "男";
      this.uname = "";
      this.pwd = "";
      this.email = "";
      this.phone = "";
    }
  })
</script>
